import React, { useState, useEffect } from "react";
import { Carousel } from "antd";
import { Statistic, Row, Col } from 'antd';
import "antd/dist/antd.css";
import "./list.css"
import special from "../../static/轮播.png";
import special1 from "../../static/开业.png";
import special2 from "../../static/年货.png";
import special3 from "../../static/夏天.jpg";
import axios from "axios";
import { useNavigate } from "react-router";
import InterIP from '../../IP/IP'
export default function List() {
  const contentStyle = {
    width: "1280px",
    height: "500px",
  };
  const contentImgStyle = {
    width: "100%",
    height: "100%",
  };
  const { Countdown } = Statistic;
  //设置截止时间  
  var str = "2021/12/17 00:00:00";
  var endDate = new Date(str);
  const deadline = endDate.getTime();

  const navigate = useNavigate();

  const [fridayState, setFriday] = useState([]);
  const [fruits, setFruits] = useState([]);
  const [seafood, setSeafood] = useState([]);
  const [meat, setMeat] = useState([]);
  const [egg, setEgg] = useState([]);
  useEffect(() => {

    let IP = InterIP().props.children;
    //礼拜五
    axios.post('http://' + IP + ':3000/index/selClassify', {
      product_variety: 'friday'
    }).then((res) => {
      setFriday((fridayState) => fridayState = res.data)
    });
    //水果
    axios.post('http://' + IP + ':3000/index/selClassify', {
      product_variety: 'fruits'
    }).then((res) => {
      setFruits((fruits) => fruits = res.data)
    });
    //海鲜
    axios.post('http://' + IP + ':3000/index/selClassify', {
      product_variety: 'seafood'
    }).then((res) => {
      setSeafood((seafood) => seafood = res.data)
    });
    //肉类
    axios.post('http://' + IP + ':3000/index/selClassify', {
      product_variety: 'meat'
    }).then((res) => {
      setMeat((meat) => meat = res.data)
    });
    //蛋奶
    axios.post('http://' + IP + ':3000/index/selClassify', {
      product_variety: 'egg'
    }).then((res) => {
      setEgg((egg) => egg = res.data);
    });

  }, [])

  function specialPage() {
    navigate('/home/special')
  }
  function goFriday() {
    navigate('/home/friday')
  }
  function fridayDetails(id) {
    return () => {
      localStorage.productId = id;
      navigate('/home/fridayDetails')
    }
  }
  function productDetails(id) {
    return () => {
      localStorage.productId = id;
      navigate('/home/productDetails')
    }
  }

  return (
    <div>
      <div className="lfy_index_list_carousel">
        <Carousel autoplay >
          <div style={contentStyle} onClick={specialPage}>
            <img style={contentImgStyle} src={special} alt="" />
          </div>
          <div style={contentStyle} onClick={specialPage}>
            <img style={contentImgStyle} src={special1} alt="" />
          </div>
          <div style={contentStyle} onClick={specialPage}>
            <img style={contentImgStyle} src={special2} alt="" />
          </div>
          <div style={contentStyle} onClick={specialPage}>
            <img style={contentImgStyle} src={special3} alt="" />
          </div>
        </Carousel >
      </div>
      <div className="lfy_index_list">
        <ul className="lfy_index_list_brief">
          <li>
            <div className="lfy_index_list_brief_newText">
              <strong>内蒙古草原</strong>
              <strong>羔羊羊精肉</strong>
            </div>
            <div className="lfy_index_list_brief_meatImg">
            </div>
          </li>
          <li>
            <div className="lfy_index_list_brief_hotText">
              <strong>新西兰柠檬</strong>
              <span>鲜橙靓皮 柠香清新</span>
            </div>
            <div className="lfy_index_list_brief_fruitsImg">
            </div>
          </li>
          <li>
            <div className="lfy_index_list_brief_newText">
              <strong>内蒙古草原</strong>
              <strong>黄牛牛精肉</strong>
            </div>
            <div className="lfy_index_list_brief_meatImg">
            </div>
          </li>
          <li>
            <div className="lfy_index_list_brief_hotText">
              <strong>新鲜草莓</strong>
              <span>留住新鲜</span>
            </div>
            <div className="lfy_index_list_brief_fruitsImg">
            </div>
          </li>
        </ul>
        <div className="lfy_index_list_friday">
          <header className="lfy_index_list_friday_header">
            <div className="lfy_index_list_friday_header_title">
              <strong>礼拜五</strong>
              <span>Friday</span>
            </div>
            <div className="lfy_index_list_friday_header_body">
              <div>距离活动开始</div>
              <Row gutter={16} className="time">
                <Col span={24}>
                  <Countdown title="" value={deadline} format="D 天 H 时 m 分 s 秒" valueStyle={{ color: "#f08200" }} />
                </Col>
              </Row>
              <div className="lfy_index_list_friday_header_countDown" onClick={goFriday}>
                更多
              </div>
            </div>
          </header>
          <div className="lfy_index_list_friday_carousel">
            <Carousel autoplay>
              <ul className="lfy_index_list_friday_list">
                {fridayState.slice(0, 4).map((data) =>
                  <li key={data.product_id} className="clear">
                    <div onClick={fridayDetails(data.product_id)}>
                      <img src={data.product_img} alt="" />
                    </div>
                    <div>
                      <h4>{data.product_name}</h4>
                      <h5>{data.product_number}{data.product_specification}</h5>
                      <h6 className="clear">
                        <span>礼拜五价:</span>
                        <span>￥{data.product_price}</span>
                      </h6>
                    </div>
                  </li>
                )}
              </ul>
              <ul className="lfy_index_list_friday_list">
                {fridayState.slice(4, 8).map((data) =>
                  <li key={data.product_id} className="clear">
                    <div onClick={fridayDetails(data.product_id)}>
                      <img src={data.product_img} alt="" />
                    </div>
                    <div>
                      <h4>{data.product_name}</h4>
                      <h5>{data.product_number}{data.product_specification}</h5>
                      <h6 className="clear">
                        <span>礼拜五价:</span>
                        <span>￥{data.product_price}</span>
                      </h6>
                    </div>
                  </li>
                )}
              </ul>
              <ul className="lfy_index_list_friday_list">
                {fridayState.slice(8, 12).map((data) =>
                  <li key={data.product_id} className="clear">
                    <div onClick={fridayDetails(data.product_id)}>
                      <img src={data.product_img} alt="" />
                    </div>
                    <div>
                      <h4>{data.product_name}</h4>
                      <h5>{data.product_number}{data.product_specification}</h5>
                      <h6 className="clear">
                        <span>礼拜五价:</span>
                        <span>￥{data.product_price}</span>
                      </h6>
                    </div>
                  </li>
                )}
              </ul>
              <ul className="lfy_index_list_friday_list">
                {fridayState.slice(12, 16).map((data) =>
                  <li key={data.product_id} className="clear">
                    <div onClick={fridayDetails(data.product_id)}>
                      <img src={data.product_img} alt="" />
                    </div>
                    <div>
                      <h4>{data.product_name}</h4>
                      <h5>{data.product_number}{data.product_specification}</h5>
                      <h6 className="clear">
                        <span>礼拜五价:</span>
                        <span>￥{data.product_price}</span>
                      </h6>
                    </div>
                  </li>
                )}
              </ul>

            </Carousel>
          </div>

        </div>
        <div className="lfy_index_list_fruits">
          <header className="lfy_index_list_fruits_header">
            <div className="lfy_index_list_fruits_header_title">
              <strong>
                新鲜水果
              </strong>
              <span>
                采自新疆优质水果生产基地，品质一流
              </span>
            </div>
            <div className="lfy_index_list_header_fruits_more">更多</div>
          </header>

          <ul className="lfy_index_list_total_list">
            {fruits.map((data, k) =>
              <li key={data.product_id}>
                <div onClick={productDetails(data.product_id)}>
                  <img src={data.product_img} alt="" />
                </div>
                <div>
                  <h4>{data.product_name}</h4>
                  <h5>{data.product_number}{data.product_specification}</h5>
                  <h6>
                    <span>￥{data.product_price}</span>
                    <span>￥{data.product_oldPrice}</span>
                    <div className="lfy_super_list_cart"></div>
                  </h6>
                </div>
              </li>
            )}
          </ul>
        </div>
        <div className="lfy_index_list_seafood">
          <header className="lfy_index_list_seafood_header">
            <div className="lfy_index_list_seafood_header_title">
              <strong>
                水产海鲜
              </strong>
              <span>
                国内外新鲜到港的鱼虾蟹贝，我们都有
              </span>
            </div>
            <div className="lfy_index_list_seafood_header_more">
              更多
            </div>
          </header>
          <ul className="lfy_index_list_total_list">
            {seafood.map((data, k) =>
              <li key={data.product_id}>
                <div onClick={productDetails(data.product_id)}>
                  <img src={data.product_img} alt="" />
                </div>
                <div>
                  <h4>{data.product_name}</h4>
                  <h5>{data.product_number}{data.product_specification}</h5>
                  <h6>
                    <span>￥{data.product_price}</span>
                    <span>￥{data.product_oldPrice}</span>
                    <div className="lfy_super_list_cart"></div>
                  </h6>
                </div>
              </li>
            )}

          </ul>
        </div>
        <div className="lfy_index_list_meat">
          <header className="lfy_index_list_meat_header">
            <div className="lfy_index_list_meat_header_title">
              <strong>
                肉类禽蛋
              </strong>
              <span>
                来自内蒙古大草原，品质一流
              </span>
            </div>
            <div className="lfy_index_list_meat_header_more">
              更多
            </div>
          </header>
          <ul className="lfy_index_list_total_list">
            {meat.map((data, k) =>
              <li key={data.product_id}>
                <div onClick={productDetails(data.product_id)}>
                  <img src={data.product_img} alt="" />
                </div>
                <div>
                  <h4>{data.product_name}</h4>
                  <h5>{data.product_number}{data.product_specification}</h5>
                  <h6>
                    <span>￥{data.product_price}</span>
                    <span>￥{data.product_oldPrice}</span>
                    <div className="lfy_super_list_cart"></div>
                  </h6>
                </div>
              </li>
            )}
          </ul>
        </div>
        <div className="lfy_index_list_egg">
          <header className="lfy_index_list_egg_header">
            <div className="lfy_index_list_egg_header_title">
              <strong>
                蛋奶速食
              </strong>
              <span>
                采自新疆优质水果生产基地，品质一流
              </span>
            </div>
            <div className="lfy_index_list_egg_header_more">
              更多
            </div>
          </header>
          <ul className="lfy_index_list_total_list">
            {egg.map((data, k) =>
              <li key={data.product_id}>
                <div onClick={productDetails(data.product_id)}>
                  <img src={data.product_img} alt="" />
                </div>
                <div>
                  <h4>{data.product_name}</h4>
                  <h5>{data.product_number}{data.product_specification}</h5>
                  <h6>
                    <span>￥{data.product_price}</span>
                    <span>￥{data.product_oldPrice}</span>
                    <div className="lfy_super_list_cart"></div>
                  </h6>
                </div>
              </li>
            )}
          </ul>
        </div>
      </div>
    </div>
  );
}
